import 'package:basic_common/app_theme.dart';
import 'package:basic_common/common_exports.dart';
/* 
 * @description: 自定义步骤条
 * @author: Jane 
 * @date: 2023-09-19 14:24:07
 */
class StepsWidget extends StatelessWidget {
  StepsWidget({Key? key, required this.currentIndex, required this.titles})
      : super(key: key);
  final int currentIndex;
  final List<String> titles;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: ScreenHelper.width(15)),
      // padding: EdgeInsets.symmetric(vertical: ScreenHelper.height(10),horizontal: ScreenHelper.width(10)),
      decoration: BoxDecoration(
          color: const Color.fromRGBO(230, 248, 242, 1),
          borderRadius: BorderRadius.circular(ScreenHelper.width(10))),
      height: ScreenHelper.height(100),
      // alignment: Alignment.center,
      // width: double.infinity,
      child: ListView.builder(
          padding: EdgeInsets.all(0.0),
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: titles.length,
          itemBuilder: (context, index) {
            //如果显示到最后一个并且Icon总数小于200时继续获取数据
            return _buildItem(index);
          }),
    );
  }

  Widget _buildItem(int index) {
    return SizedBox(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            children: [
              Opacity(
                opacity: index == 0 ? 0 : 1,
                child: Container(
                  width: ScreenHelper.width(30),
                  height: 1,
                  decoration: BoxDecoration(
                      color: index < currentIndex
                          ? AppTheme.primyColor
                          : AppTheme.primyColor.withOpacity(.3)),
                ),
              ),
              Container(
                alignment: Alignment.center,
                width: ScreenHelper.width(22),
                height: ScreenHelper.width(22),
                decoration: BoxDecoration(
                  color: index <= currentIndex
                      ? AppTheme.primyColor
                      : AppTheme.primyColor.withOpacity(.3),
                  borderRadius: BorderRadius.circular(50),
                ),
                //超出部分，可裁剪
                clipBehavior: Clip.antiAlias,
                child: Text(
                  '${index + 1}',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white, fontSize: ScreenHelper.sp(14)),
                ),
              ),
              Opacity(
                opacity: titles.length - 1 == index ? 0 : 1,
                child: Container(
                  width: ScreenHelper.width(36),
                  height: 1,
                  decoration: BoxDecoration(
                      color: index <= currentIndex
                          ? AppTheme.primyColor
                          : AppTheme.primyColor.withOpacity(.3)),
                ),
              )
            ],
          ),
          SizedBox(
            height: ScreenHelper.height(8),
          ),
          Container(
            padding: EdgeInsets.only(top: ScreenHelper.height(5)),
            alignment: Alignment.center,
            child: Text(
              titles[index],
              style: TextStyle(
                  color: index <= currentIndex
                      ? AppTheme.dartTextColor
                      : AppTheme.weakTextColor),
            ),
          )
        ],
      ),
    );
  }
}
